import React from 'react';
import { Icon, message } from 'antd';
import _ from 'lodash';
import { getTempDetail } from '@/api/index';

export default ({ tags, setTags, curIndex, setIsShare, handleCurIndex, setFormInfo }) => {

  function fetchTempDetails(id) {
    getTempDetail(id).then(res => {
      console.log('res', res);
      if (res.code === '0') {
        res.data.list.forEach(e => {
          e.cfiConfigId = e.cfiId;
        });
        setFormInfo(_.clone(res.data.list));
      } else {
        message.error(res.msg);
      }

    });
  }

  return (
    <div className="tag-views">
      <ul >
        {
          tags.map((item, index) => {
            return (
              <li className={ curIndex === item.cucId ? 'tag-views-item active-tag-views' : 'tag-views-item' } style={{ cursor: 'pointer' }} key={index} onClick={ () => {
                setIsShare(item.cucIsShare);
                if (curIndex !== item.cucId) {
                  fetchTempDetails(item.cucId);
                }
                handleCurIndex(item.cucId);
              } }>
                {item.cucName }
                <Icon type="close" style={{ marginLeft: '5px' }}
                  // eslint-disable-next-line complexity
                  onClick={ (e) => {
                    e.stopPropagation();
                    e.nativeEvent.stopImmediatePropagation();
                    const newViews = _.filter(tags, (_v, i) => i !== index); // 剩下的 tags
                    const newIdx = _.findIndex(tags,(v) => curIndex === v.cucId);

                    console.log('tags', tags);
                    console.log('curIndex: ', curIndex);

                    // 如果是从第一项开始删，且第一项被选中
                    if (index === 0 && curIndex === tags[index].cucId) {
                      if (tags.length > 1) {
                        handleCurIndex(tags[newIdx + 1].cucId);
                        fetchTempDetails(tags[newIdx + 1].cucId);
                      } else {
                        handleCurIndex('');
                      }
                    } else if (index === tags.length - 1 && curIndex === tags[index].cucId) {
                      // 如果是删除最后一项，且最后一项被选中
                      if (tags.length > 1) {
                        handleCurIndex(tags[newIdx - 1].cucId);
                        fetchTempDetails(tags[newIdx - 1].cucId);
                      } else {
                        handleCurIndex('');
                      }
                    } else if (curIndex === tags[index].cucId) {
                      // 如果是删除中间项 且 中间项已被选中，就设置 curIndex 为第一项
                      handleCurIndex(tags[0].cucId);
                      fetchTempDetails(tags[0].cucId);
                    } else {
                      // 删除没有被选中的
                      fetchTempDetails(tags[newIdx].cucId);
                    }
                    // fetchTempDetails(tags[0].cucId);
                    setTags(newViews);
                    setFormInfo([]);
                  }
                  } />
              </li>
            );
          })
        }
      </ul>
    </div>
  );
};
